<template>
  <div class="app-container">
    <div v-if="flag" style="display: flex;flex-wrap: wrap">
    <div  v-for="item,i in albums" style="margin-bottom: 20px;margin-right: 20px" @click="detail(i)">
      <img @click="flag=false" :src="item.pictures[0]" class="avatar">
      <div @click="flag=false">{{item.name}}</div>
    </div>
    </div>
    <div v-else>
      <a  style="color: #409EFF"><i style="margin-bottom: 20px" class="el-icon-arrow-left" @click="flag=true">返回相册列表</i></a>
      <el-form  ref="form" :model="form" label-width="100px">
          <el-form-item label="相册名称：">
            <span>{{albums[index].name}}</span>
          </el-form-item>
          <el-form-item label="相册图片：">
            <img v-for="item in albums[index].pictures" style="margin-right: 20px" :src="item" class="avatar">
          </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import uploadimg from '@/components/UploadImg/index.vue'
  export default {
    props: {
      albums: {
        type: Object,
        default: []
      },
    },
    watch:{
      form(){
        this.time=this.form.time
      }
    },
  data() {
    return {
      index:-1,
      flag:true,
    }
  },
  components:{
    uploadimg,
  },
  methods: {
    detail(index){
      this.index=index
      this.flag=false
    },
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
  img{
    width: 148px;
    height: 148px;
    border-radius: 6px
  }
</style>

